<template>
  <div>
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="文章标题">
          <el-input placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Id" width="60">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.Id }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>文章简介: {{ scope.row.name }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.title }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="文章内容" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>文章内容: {{ scope.row.comtent }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.comtent }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="点赞数量" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <el-tag size="medium">{{ scope.row.likemun }}</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="评论数量" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
              <el-tag size="medium">{{ scope.row.comtent }}</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="阅读数量" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
              <el-tag size="medium">{{ scope.row.comtent }}</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
    
  },
  methods:{
    handSave() {
      //判断有没有id 有id 则是更新
      // if (this.formData.id !== undefined) {
      //   updatePut(this.formData.id, this.formData).then(({ data }) => {
      //     this.$message({
      //       showClose: true,
      //       message: "恭喜你，编辑成功",
      //       type: "success",
      //     });
      //     //替换掉更新的这一行
      //     this.tableData.splice(this.currentIndex, 1, data.data);
      //   });
      // } else {
      //   //没有id 并且 username 和 password 不为空时执行添加
      //   if (this.formData.username !== "" && this.formData.password !== "") {
      //     addPost(this.formData).then(() => {
      //       //将数据实时更新到前端页面
      //       this.fetchData(this.pager);
      //     });
      //     this.$message({
      //       showClose: true,
      //       message: "恭喜你，添加成功",
      //       type: "success",
      //     });
      //   } else {
      //     this.$message({
      //       showClose: true,
      //       message: "用户名和密码不能为空",
      //       type: "warning",
      //     });
      //   }
      // }
      this.dialogFormVisible = false;
    },
  }
  
};
</script>

<style>
</style>